<template>
    <a-modal
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    >
      <a-form  :form='form'>
        <a-form-item label='问题' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
            <a-select   v-decorator="[ 'question',baseInit.question ]"  >
              <a-select-option  v-for='item in data'  :value="item.question"  v-if='data.length>0' :key='index'>{{item.question}}</a-select-option> 
            </a-select>
        </a-form-item>
        <a-form-item label='回答' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
            <a-textarea  v-decorator="[ 'answer',baseInit.answer ]"  rows='3'/>
        </a-form-item> 
      </a-form>
    </a-modal>
</template>

<script>
  import  {  submitAddProductQA,list_QA  }  from  '@/api/product/index'
export default {
  name: 'productQA_addModal',
  props:{
      visible:{
        type:Boolean,
        default:false
      }, 
      writeData:{ //writeData:已填data
         type:[Object,Array],
        default:()=>[]
      },
  },
  data () {
    return {
      modalProps:{
          title:'',
          isEdit:false, /*表单进入状态*/
      },
      confirmLoading: false, 
      /*form*/
      baseInit:{
        question:{initialValue:'', rules : [{ required : true , message : '请选择问题' }]}, 
        answer:{ initialValue :'' , rules : [{ required : true , message : '请输入问题答案' }]}, 
      },  
      data:[],/** QAdata **/ 

    }
  },
  methods:{ 
     handleCancel(e) {
        this.$emit('handleCancel') 
    }, 
    handleOk(e) {
      let that = this
        this.form.validateFields((err, values) => {
            if (!err) {
                // console.log('Received values of form: ', values); 
                that.$emit('handleOk',values) 
            }
            else{
                console.log(err)
            }
        });
    },
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  mounted(){
    this.$nextTick(()=>{ 
      this.$on('openDialog',function(data){//data :模板data 
          this.modalProps.isEdit = false
          this.modalProps.title = '添加产品QA' 

          //，模板             已经填的问题    剩下需要填的问题
          //[{que:'?'}]        [{que:?}]
          //[{que2:'?'}]       [{que2:?}]
          //[{que3:'?'}]
          // data是模板，writeData是已经输入的data，两者对比
          if(this.writeData.length>0){
              this.writeData.forEach((item)=>{ 
                  data.forEach((it,ind)=>{ 
                    if(it.question == item.question){
                      data.splice(ind,1)
                    }
                  })  
              }) 
          }
          this.data = data

          /*清空表单输入和校验*/
          this.form.resetFields()
          /*设置默认值*/
          this.baseInit.question.initialValue = ''
          this.baseInit.answer.initialValue = '' 
      })
      this.$on('editDialog',function(data){
        this.modalProps.isEdit = true
        this.modalProps.title = '编辑问题模板'
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.question.initialValue = data.question
        this.baseInit.question.initialValue = data.question 
        
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
